import Vue from "vue"
import Vuex, {ActionTree, GetterTree, ModuleTree, MutationTree, Payload} from "vuex"
//第一步使用插件
Vue.use(Vuex)


/**
 * 这个里面是没有进行抽离的
 *
 * 定义的方法名也可以放在常量里面方便管理
 *
 * 进行抽离的最好是
 * getters 单独拉个文件
 * actions 单个拉个文件
 * mutations 单个拉个文件
 * modules 也最好单个拉个文件夹
 *
 * @type {Store<{studens: [{name: string, id: number, age: number}, {name: string, id: number, age: number}, {name: string, id: number, age: number}, {name: string, id: number, age: number}], counter: number}>}
 */

//第二步创建
const vuex=new Vuex.Store({
  //状态管理
  state: {
    counter: 100,
    studens: [
      {id:1,name:"zhangsan",age:15},
      {id:2,name:"lisi",age:18},
      {id:3,name:"wangwu",age:17},
      {id:4,name:"zhaoliu",age:16}
    ]
  },
  //这个和计算属性有点类似
  getters: {
    ageGte16(state){
      return state.studens.filter(e=>e.age>=16)
    },
    ageGteN(state){
      return function(n){
        return state.studens.filter(e=>e.age>=n)
      }
    }
  },
  //异步提交到这，然后在提交mutations
  actions: {
    /**
     *
     * @param content  上一下文，这里面的含义可以列结尾 vuex 对象,但是感觉像是包了一层，可以自己打印看一下
     * @param value 传递的值
     */
    counterInc(content,value){
      // console.log(content);
      // console.log(value);
      setTimeout(()=>{
        content.commit("incN",value)
      },1000)
    },
    counterInc2(content,data){
      // console.log(content);
      // console.log(value);
      setTimeout(()=>{
        content.commit("incN",data.value)
        data.success("我是传递数据====")
      },1000)
    }
  },
  //同步提交的业务
  mutations: {
    //state 这个参数是 commit 提交默认传递过来的 ，其实和上面的state是一个
    inc(state){
      state.counter++;
    },
    dec(state){
      state.counter--;
    },
    incN(state,n){
      state.counter+=n
    },
    otherClick(state,payload){
      state.counter+=payload.n
    },
    addStudent(state,student){
      state.studens.push(student)
    },
    deleteStudent(state){
      //删除一个学生 这样删除不是响应式的
      //delete state.studens[0]
      //这样是相应式的
      Vue.delete(state.studens,0)
    }
  },
  /**
   * 模块的管理，可能一个项目很大，
   * A模块 管理一部分数据
   * B 模块管理一部分数据
   */
  modules: {

  }
})

export default vuex
